<template>
  <section class="home" >
    <div >
      <nav>
        <router-link tag="div" to="/map" class="address">
          <img src="@/assets/images/address.jpg"/>
          <span>济南</span>
        </router-link>
        <img src="@/assets/images/logo.jpg"/>
        <router-link to="/consult/term">
          <img class="search" src="@/assets/images/search.jpg"/>
        </router-link>
      </nav>
      <div ref="wrapper" class="item" >
        <div class="content">
          <home-swiper :swiper="swiperItem"/>
          <home-banner :swiper="bannerItem"/>
          <home-conetnt/>
          <home-message/>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import HomeSwiper from './components/Swiper'
import HomeBanner from './components/Banner'
import HomeConetnt from './components/Content'
import HomeMessage from './components/Message'
import BScroll from 'better-scroll'
export default {
  name: 'Home',
  components: {
    HomeSwiper,
    HomeBanner,
    HomeConetnt,
    HomeMessage
  },
  data () {
    return {
      swiperItem: [],
      bannerItem: [],
      classifyItem: [],
      scroll: null
    }
  },
  mounted () {
    // 使用ref配合refs获取dom元素
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper)
    })
  },
  created () {
    this.getHomeItem()
  },
  methods: {
    getHomeItem () {
      this.axios.get('/homeImages')
        .then((res) => {
          // console.log(res)
          let data = res.data
          this.swiperItem = data[0].swiperList
          this.bannerItem = data[1].bannerList
          this.classifyItem = data[2].classifyList
          // console.log(data[0].swiperList)
          this.$store.commit('getswiperItem', data[0].swiperList) // 获取banner的值同步到vuex
          this.$store.commit('getbannerItem', data[1].bannerList) // 获取banner的值同步到vuex
          this.$store.commit('getclassifyItem', data[2].classifyList) // 获取banner的值同步到vuex
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .home
    font-size 30px
    background #f5f5f5
    width 100%
    margin-bottom 100px
    nav
      position fixed
      top 0
      width 100%
      box-sizing border-box
      background #fff
      padding 18px 0 20px
      text-align center
      z-index 999
      img
        width 200px
      .search
        width 42px
        position absolute
        right 5%
        top 25px
      .address
        position absolute
        left 3%
        top 33px
        img
          width 33px
          margin -6px 2px 0 0
        span
          font-size 28px
    .item
      overflow: hidden
      position: absolute
      top: 100px
      left: 0
      right: 0
      bottom: 100px
      background #f5f5f5
</style>
